<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Search</title>
</head>
<body>
    <h2 id="search">语音识别查电影</h2>
    <ul id="list">

    </ul>

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
    <script type="text/javascript">
        console.log('wx.config')
        /*
         步骤一：绑定域名
         步骤二：引入JS文件
         http://res.wx.qq.com/open/js/jweixin-1.6.0.js
         步骤三：通过config接口注入权限验证配置并申请所需开放标签
         */
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
            appId: 'wxa82ca38bf52c22da', // 必填，公众号的唯一标识
            timestamp: '<%= timestamp %>', // 必填，生成签名的时间戳
            nonceStr: '<%= noncestr %>', // 必填，生成签名的随机串
            signature: '<%= signature %>',// 必填，签名
            jsApiList: [// 必填，需要使用的JS接口列表
                'updateAppMessageShareData',//“分享给朋友”及“分享到QQ”
                'updateTimelineShareData',  //“分享到朋友圈”及“分享到QQ空间”
                'startRecord',              //开始录音接口
                'stopRecord',               //停止录音接口
                'translateVoice'            //识别音频并返回识别结果接口
            ],
            openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
        wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
            // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
            // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

            //判断当前客户端版本是否支持指定JS接口
            wx.checkJsApi({
                jsApiList: [
                    'updateAppMessageShareData',//“分享给朋友”及“分享到QQ”
                    'updateTimelineShareData',  //“分享到朋友圈”及“分享到QQ空间”
                    'startRecord',              //开始录音接口
                    'stopRecord',               //停止录音接口
                    'translateVoice'            //识别音频并返回识别结果接口
                ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log(res)
                },
                fail: function (err) {
                    console.log(err)
                }
            });

            // 是否在录音中
            var isRecord = false;
            // 语音识别功能
            $('#search').on('click', function () {
                if (!isRecord) {
                    // 开始录音
                    wx.startRecord();
                    isRecord = true;
                } else {
                    //停止录音接口
                    wx.stopRecord({
                        success: function (res) {
                            // 停止录音，会自动上传录音到微信服务器中，微信服务器会返回一个id给开发者使用
                            var localId = res.localId;
                            // 将录音转化成文字
//                            wx.translateVoice({
//                                localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
//                                isShowProgressTips: 1, // 默认为1，显示进度提示
//                                success: function (res) {
//                                    alert(res.translateResult); // 语音识别的结果
//                                }
//                            });// end translateVoice 识别音频并返回识别结果接口

                            // 搜索豆瓣相应的电影数据
                            //https://api.douban.com/v2/movie/search?q={text}
                            var url = 'https://api.douban.com/v2/movie/search'
                            $.ajax({
                                type: 'GET',
                                url: url,
                                data: { count: 20, q: '西虹市首富' },
                                dataType: 'jsonp',
                                success: function (data) {
                                    alert(data)
                                    var { subjecs } = data
                                    var html = '';
                                    subjecs.forEach(function (item) {
                                        html += '<h2>' + item.title + '</h2>' +
                                          '     <p>评分：' + item.rating.average + '</p>' +
                                          '     <div>' +
                                          '        <img src="' + item.images.small + '" alt="' + item.title + '">' +
                                          '      </div>' +
                                          '    <a href="' + item.alt + '">' + item.title + '</a>'
                                    })// end forEach
                                    $('#list').html(html);

                                    // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
                                    wx.updateAppMessageShareData({
                                        title: '', // 分享标题
                                        desc: '', // 分享描述
                                        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                        imgUrl: '', // 分享图标
                                        success: function () {
                                            // 设置成功
                                        }
                                    })// end updateAppMessageShareData
                                }
                            });//end 豆瓣电影数据

                            isRecord = false;
                        }
                    });
                }
            })// end search
        });// end wx.ready
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，
            // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });// wx.error

    </script>
</body>
</html>